<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
		<link rel='stylesheet' href='css/main2.css' type='text/css'>
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		
	</head>

	<body>
		<div data-role="page"  data-theme="b">
			
			<header data-tap-toggle="false" data-position="fixed" data-role="header" role="banner">
				
				<a href="#menuPanel" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-inline="true">Bars</a>
				
				<h1 id="centerheader">
					<a href="main.html">
						<img src="img/aa.png" alt="" />
					</a>
				</h1>
				<h5>${sessionScope.userLoginInfo.name}님 환영합니다.</h5>
				<a href="#rightpanel" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">Grid</a>
				
			</header>
							
			
			
			<section id="menuPanel" data-display="overlay" data-position-fixed="true" data-role="panel"  data-theme="b">
			<div class="ui-panel-inner" ><nav class="main-nav">
				<ul class="menupanel_one">
					<li>
					<a href="main" data-lid="home" class="ui-link active">MAIN</a>
					</li>
					
					<li>
					<a data-lid="vehicles" class="ui-link">업무보고</a>
					</li>
						<ul class="menupanel_two">
							<li>
								<a href="reportingregist" data-lid="mobile_apps" class="ui-link">등 록</a>
							</li>
							<li>
								<a href="todayreporting" data-lid="mobile_apps" class="ui-link">일일업무</a>
							</li>
							<li>
								<a href="weekreporting" data-lid="mobile_apps" class="ui-link">주간업무</a>
							</li>
							<li>
								<a href="monthreporting" data-lid="mobile_apps" class="ui-link">월간업무</a>
							</li>
						</ul>
					<li>
						
					<a data-lid="vehicles" class="ui-link">회의록</a>
					
					</li>
						<ul class="menupanel_two">
							<li>
								<a href="minutesregist" data-lid="mobile_apps" class="ui-link">등 록</a>
							</li>
							<li>
								<a href="minuteslist" data-lid="mobile_apps" class="ui-link">지난 회의록</a>
							</li>
						</ul>
				
					<li>
						<a data-lid="mobile_apps" class="ui-link">거래처 관리</a>
					</li>
						<ul class="menupanel_two">
							<li>
								<a href="accountlist" data-lid="mobile_apps" class="ui-link">거래처 보기</a>
							</li>
							<li>
								<a href="accountregist" data-lid="mobile_apps" class="ui-link">거래처 등록</a>
							</li>							
						</ul>
					
					<li>
						<a href="location" data-lid="owner_site" >팀원 위치 보기</a>
					</li>
					
					<li>
						<a href="#companybbs" data-lid="owner_site" >사내 게시판</a>
					</li>
						
					<li>
						<a data-lid="owner_site" >PT</a>
					</li>
						<ul class="menupanel_two">
							<li>
								<a href="ptregist" data-lid="mobile_apps" class="ui-link">등 록</a>
							</li>
							<li>
								<a href="ptview" data-lid="mobile_apps" class="ui-link">보 기</a>
							</li>							
						</ul>
					
				</ul>
				</nav></div>
			</section>	
			
			
			
					
			<div data-role="panel" id="rightpanel" data-display="overlay" data-position="right" data-theme="b">
				
			</div>
			
			
			
			<div data-role="content" class="ui-panel-content-wrap">
			 	<form id='searchfrom' method="get" data-ajax="ture">
					<fieldset>
						<div data-role="fieldcontain">
							<input name="keyword" id="searchinput1" placeholder="" value="" type="search" placeholder="검색어를 입력하세요">
					    	<select id="selectmenu2" name="keywordType">
					        	<option value="accountName">거래처명</option>
					            <option value="companyCode">사업자번호</option>
					        </select>
					        <select id="selectmenu3" name="stateType">
					        <option value="">
					        	거래처 진행 상태
					        </option>
			                <option value="0">
			                    신규
			                </option>
			                <option value="1">
			                    제안중
			                </option>
			                <option value="2">
			                    계약완료
			                </option>
			                <option value="3">
			                    계약종로
			                </option>
			            </select>
				       	</div>
						<a id="searchaccount" data-role="button">검색</a>	
					</fieldset>
				</form>
				
				<div id="accountlist" data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false"></div>
				
			</div>
			
			
			
			
			
		
			<script>
				////////////////////////////////////////////////////////////////////////////////
				// JSON 유틸
				$.fn.serializeObject = function() {
				    var o = {};
				//    var a = this.serializeArray();
				    $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
				        if ($(this).attr('type') == 'hidden') { //if checkbox is checked do not take the hidden field
				            var $parent = $(this).parent();
				            var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
				            if ($chb != null) {
				                if ($chb.prop('checked')) return;
				            }
				        }
				        if (this.name === null || this.name === undefined || this.name === '') return;
				        var elemValue = null;
				        if ($(this).is('select')) elemValue = $(this).find('option:selected').val();
				        else elemValue = this.value;
				        if (o[this.name] !== undefined) {
				            if (!o[this.name].push) {
				                o[this.name] = [o[this.name]];
				            }
				            o[this.name].push(elemValue || '');
				        } else {
				            o[this.name] = elemValue || '';
				        }
				    });
				    return o;
				}
			
				$(document).on("swipeleft", function(event, ui){
					$("#rightpanel").panel("open");
				});
				
				$(document).on("swiperight", function(event, ui){
					$("#menuPanel").panel("open");
				});
				
					
			
				
				
				function accountlistview(){
					
					$.get('accountlistAction',JSON.parse(JSON.stringify($(searchfrom).serializeObject()))).done(function(data){
						
						//거래처상태가 있는지 없는지를 검증한다.
						
	
						var verify = ["", "", "", ""];
						
						var state = ["", "", "", ""];
						
						var stateBase = "<div data-role='collapsible-set' data-theme='c' data-content-theme='d' data-inset='false'>";
						
						state[0] ="<div data-role='collapsible'>";
						state[0] += "<h2>신규</h2>";
						state[0] += "<ul data-role='listview' data-theme='d' data-divider-theme='d'> ";
						
						state[1] ="<div data-role='collapsible'>";
						state[1] += "<h2>제안중</h2>";
						state[1] += "<ul data-role='listview' data-theme='d' data-divider-theme='d'> ";
						
						state[2] ="<div data-role='collapsible'>";
						state[2] += "<h2>계약완료</h2>";
						state[2] += "<ul data-role='listview' data-theme='d' data-divider-theme='d'> ";
						
						state[3] ="<div data-role='collapsible'>";
						state[3] += "<h2>계약종료</h2>";
						state[3] += "<ul data-role='listview' data-theme='d' data-divider-theme='d'> ";
						
						for(var i = 0 ; i< data.length; i++ ){
							
							if(data[i].state == 0){
								verify[0] = "true";
								state[0] += "<li><a href='accountview?accountCode=" + data[i].accountCode + "' rel='external'>";
								state[0] += "<h3>" + data[i].accountName + " (담당자 " + data[i].epId + ") </h3>";
								state[0] += "<p><strong>" + data[i].addr1 + data[i].addr2 + "</strong></p>";
								state[0] += "<p>" + data[i].personName + "</p>";
								state[0] += "<p class='ui-li-aside'><strong>" + data[i].regdate + "</strong></p>";
								state[0] += "</a></li>";
								
							}else if(data[i].state == 1){
								verify[1] = "true";
								state[1] += "<li><a href='accountview?accountCode=" + data[i].accountCode + "' rel='external'>";
								state[1] += "<h3>" + data[i].accountName + " (담당자 " + data[i].epId + ") </h3>";
								state[1] += "<p><strong>" + data[i].addr1 + data[i].addr2 + "</strong></p>";
								state[1] += "<p>" + data[i].personName + "</p>";
								state[1] += "<p class='ui-li-aside'><strong>" + data[i].regdate + "</strong></p>";
								state[1] += "</a></li>";
								
							}else if(data[i].state == 2){
								verify[2] = "true";
								state[2] += "<li><a href='accountview?accountCode=" + data[i].accountCode + "' rel='external'>";
								state[2] += "<h3>" + data[i].accountName + " (담당자 " + data[i].epId + ") </h3>";
								state[2] += "<p><strong>" + data[i].addr1 + data[i].addr2 + "</strong></p>";
								state[2] += "<p>" + data[i].personName + "</p>";
								state[2] += "<p class='ui-li-aside'><strong>" + data[i].regdate + "</strong></p>";
								state[2] += "</a></li>";
								
							}else{
								verify[3] = "true";
								state[3] += "<li><a href='accountview?accountCode=" + data[i].accountCode + "' rel='external'>";
								state[3] += "<h3>" + data[i].accountName + " (담당자 " + data[i].epId + ") </h3>";
								state[3] += "<p><strong>" + data[i].addr1 + data[i].addr2 + "</strong></p>";
								state[3] += "<p>" + data[i].personName + "</p>";
								state[3] += "<p class='ui-li-aside'><strong>" + data[i].regdate + "</strong></p>";
								state[3] += "</a></li>";
								
							}
						
						
						}
						
						
						state[0] += "</ul></div>";
						state[1] += "</ul></div>";
						state[2] += "</ul></div>";
						state[3] += "</ul></div>";
						
						
						console.log("aaaaa" + verify[0]);
						
						for(var i = 0 ; i < verify.length; i++){
							
							if(verify[i] == "true"){
								stateBase += state[i];
								
							}
							
						}
						
						stateBase += "</div>";
						
						
						
						$('#accountlist').html(stateBase).trigger("create");
						

					});
					
				}
			
	
				$('#searchaccount').click(function(){

					accountlistview();
					
				});
				
				accountlistview();
				
				

		
			</script>	
			

</body>
</html>